<template>
	<view class="tab_box">
		<view class="left" :class="classification == 2 ? 'left2' :'' ">
			<scroll-view class="" scroll-x="true" :show-scrollbar='false'>
				<view class="row_list">
					<view class="row" :class="active == item.id && color  ?'active_row' :''" v-for="(item,index) in list" :key='index' @click="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="right" v-if='classification == 1'>
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill"></image>
		</view>
		<view class="right" v-if='classification == 3'>
			<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" class="search"></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:[]
			},
			classification:{
				type:[String,Number],
				default:2
			},
			color:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return{
				active:0
			}
		},
		methods:{
			changeTab(id){
				// if(this.active == id) return
				this.active = id
				this.$emit('change',id)
			}
		},
		created(){
			// this.active = this.list[0].id
		}
	}
</script>

<style lang="scss" scoped>
	.tab_box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			width: calc(100% - 58rpx);
			.row_list{
				display:flex;
				white-space: nowrap;
				.row{
					padding: 0 40rpx;
					font-size: 28rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #f6f7fb;
					border-radius: 30rpx;
					margin-right: 20rpx;
					&:last-child{
						margin-right:0
					}
				}
				.active_row{
					// background: #36353A;
					// color:#fff;
					color: #f4f4f4!important;
					// background: #393939!important
					background-image: linear-gradient(rgb(255,155,3), rgb(252,183,78))!important;
					    box-shadow: 0px 3px 7px 0px #ff9e0c;
				}
			}
		}
		.left2{
			width:100%
		}
		.right{
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.search{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.scroll::-webkit-scrollbar {
	 display: none !important;
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
</style>
